<template>
  <div class="document-review-container">
    <div class="page-header">
      <h2>资料审核</h2>
      <p>欢迎回来，{{ supervisorInfo.name }}。以下是待审核的资料。</p>
    </div>

    <div class="review-content">
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="pending" tab="待审核">
          <div class="review-list">
            <a-empty v-if="pendingDocuments.length === 0" description="暂无待审核资料" />
            <div v-else class="document-cards">
              <a-card v-for="doc in pendingDocuments" :key="doc.id" class="document-card" hoverable @click="openDocumentDetail(doc)">
                <template #cover>
                  <div class="document-cover">
                    <FileOutlined class="document-icon" />
                  </div>
                </template>
                <a-card-meta :title="doc.title">
                  <template #description>
                    <div class="document-meta">
                      <div class="meta-item">
                        <UserOutlined />
                        <span>{{ doc.submitter }}</span>
                      </div>
                      <div class="meta-item">
                        <ClockCircleOutlined />
                        <span>{{ doc.submitTime }}</span>
                      </div>
                      <div class="meta-item">
                        <TagOutlined />
                        <span>{{ doc.type }}</span>
                      </div>
                    </div>
                  </template>
                </a-card-meta>
                <div class="document-actions">
                  <a-button type="primary" @click.stop="openDocumentDetail(doc)">查看详情</a-button>
                </div>
              </a-card>
            </div>
          </div>
        </a-tab-pane>
        
        <a-tab-pane key="approved" tab="已通过">
          <div class="review-list">
            <a-empty v-if="approvedDocuments.length === 0" description="暂无已通过资料" />
            <div v-else class="document-cards">
              <a-card v-for="doc in approvedDocuments" :key="doc.id" class="document-card" hoverable @click="openDocumentDetail(doc)">
                <template #cover>
                  <div class="document-cover approved">
                    <FileOutlined class="document-icon" />
                    <CheckCircleOutlined class="status-icon" />
                  </div>
                </template>
                <a-card-meta :title="doc.title">
                  <template #description>
                    <div class="document-meta">
                      <div class="meta-item">
                        <UserOutlined />
                        <span>{{ doc.submitter }}</span>
                      </div>
                      <div class="meta-item">
                        <ClockCircleOutlined />
                        <span>{{ doc.approveTime }}</span>
                      </div>
                      <div class="meta-item">
                        <TagOutlined />
                        <span>{{ doc.type }}</span>
                      </div>
                    </div>
                  </template>
                </a-card-meta>
                <div class="document-actions">
                  <a-button @click.stop="openDocumentDetail(doc)">查看详情</a-button>
                </div>
              </a-card>
            </div>
          </div>
        </a-tab-pane>
        
        <a-tab-pane key="rejected" tab="已拒绝">
          <div class="review-list">
            <a-empty v-if="rejectedDocuments.length === 0" description="暂无已拒绝资料" />
            <div v-else class="document-cards">
              <a-card v-for="doc in rejectedDocuments" :key="doc.id" class="document-card" hoverable @click="openDocumentDetail(doc)">
                <template #cover>
                  <div class="document-cover rejected">
                    <FileOutlined class="document-icon" />
                    <CloseCircleOutlined class="status-icon" />
                  </div>
                </template>
                <a-card-meta :title="doc.title">
                  <template #description>
                    <div class="document-meta">
                      <div class="meta-item">
                        <UserOutlined />
                        <span>{{ doc.submitter }}</span>
                      </div>
                      <div class="meta-item">
                        <ClockCircleOutlined />
                        <span>{{ doc.rejectTime }}</span>
                      </div>
                      <div class="meta-item">
                        <TagOutlined />
                        <span>{{ doc.type }}</span>
                      </div>
                    </div>
                  </template>
                </a-card-meta>
                <div class="document-actions">
                  <a-button @click.stop="openDocumentDetail(doc)">查看详情</a-button>
                </div>
              </a-card>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 文档详情抽屉 -->
    <a-drawer
      v-model:visible="drawerVisible"
      :title="currentDocument?.title || '文档详情'"
      width="600"
      placement="right"
    >
      <template v-if="currentDocument">
        <div class="document-detail">
          <div class="detail-header">
            <h3>{{ currentDocument.title }}</h3>
            <a-tag :color="getStatusColor(currentDocument.status)">{{ getStatusText(currentDocument.status) }}</a-tag>
          </div>
          
          <div class="detail-info">
            <div class="info-item">
              <span class="label">提交人：</span>
              <span class="value">{{ currentDocument.submitter }}</span>
            </div>
            <div class="info-item">
              <span class="label">提交时间：</span>
              <span class="value">{{ currentDocument.submitTime }}</span>
            </div>
            <div class="info-item">
              <span class="label">文档类型：</span>
              <span class="value">{{ currentDocument.type }}</span>
            </div>
            <div class="info-item" v-if="currentDocument.status !== 'pending'">
              <span class="label">审核时间：</span>
              <span class="value">{{ currentDocument.approveTime || currentDocument.rejectTime }}</span>
            </div>
            <div class="info-item" v-if="currentDocument.status === 'rejected'">
              <span class="label">拒绝原因：</span>
              <span class="value">{{ currentDocument.rejectReason }}</span>
            </div>
          </div>
          
          <a-divider />
          
          <div class="document-content">
            <h4>文档内容</h4>
            <div class="content-preview">
              <div class="preview-image">
                <img :src="currentDocument.previewUrl" alt="文档预览" />
              </div>
              <div class="preview-text">
                <p>{{ currentDocument.content }}</p>
              </div>
            </div>
          </div>
          
          <a-divider />
          
          <div class="document-actions" v-if="currentDocument.status === 'pending'">
            <a-button type="primary" @click="approveDocument">通过审核</a-button>
            <a-button danger @click="showRejectModal">拒绝</a-button>
          </div>
        </div>
      </template>
    </a-drawer>

    <!-- 拒绝原因模态框 -->
    <a-modal
      v-model:visible="rejectModalVisible"
      title="拒绝原因"
      @ok="rejectDocument"
      okText="确认拒绝"
      cancelText="取消"
    >
      <a-form :model="rejectForm">
        <a-form-item label="拒绝原因" name="reason" :rules="[{ required: true, message: '请输入拒绝原因' }]">
          <a-textarea v-model:value="rejectForm.reason" :rows="4" placeholder="请输入拒绝原因" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { 
  FileOutlined, 
  UserOutlined, 
  ClockCircleOutlined, 
  TagOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

// 当前登录的上级账号信息
const supervisorInfo = reactive({
  name: '张主任',
  role: '上级审核员',
  department: '牙科中心'
})

// 当前激活的标签页
const activeTab = ref('pending')

// 待审核文档列表
const pendingDocuments = ref([
  {
    id: 1,
    title: '患者病历资料-李明',
    submitter: '王医生',
    submitTime: '2025-03-14 09:30',
    type: '病历资料',
    status: 'pending',
    content: '患者李明，男，35岁，因牙痛就诊。初步诊断为智齿冠周炎，建议拔除。',
    previewUrl: 'https://via.placeholder.com/400x300?text=病历资料预览'
  },
  {
    id: 2,
    title: '诊所设备申请表',
    submitter: '赵医生',
    submitTime: '2025-03-14 10:15',
    type: '设备申请',
    status: 'pending',
    content: '申请购买新型牙科治疗椅一台，用于替换3号诊室老旧设备。预算约5万元。',
    previewUrl: 'https://via.placeholder.com/400x300?text=设备申请预览'
  },
  {
    id: 3,
    title: '员工培训计划-2025年Q2',
    submitter: '刘主管',
    submitTime: '2025-03-13 16:45',
    type: '培训计划',
    status: 'pending',
    content: '2025年第二季度员工培训计划，包括新技术培训、服务质量提升等内容。',
    previewUrl: 'https://via.placeholder.com/400x300?text=培训计划预览'
  }
])

// 已通过文档列表
const approvedDocuments = ref([
  {
    id: 4,
    title: '2025年一季度财务报表',
    submitter: '财务部-张会计',
    submitTime: '2025-03-10 14:20',
    approveTime: '2025-03-11 09:15',
    type: '财务报表',
    status: 'approved',
    content: '2025年第一季度财务报表，包含收入、支出、利润等详细数据。',
    previewUrl: 'https://via.placeholder.com/400x300?text=财务报表预览'
  },
  {
    id: 5,
    title: '新员工入职资料-陈医生',
    submitter: '人事部-李经理',
    submitTime: '2025-03-09 11:30',
    approveTime: '2025-03-10 10:25',
    type: '人事资料',
    status: 'approved',
    content: '新入职牙医陈医生的个人资料、学历证明、执业资格证等文件。',
    previewUrl: 'https://via.placeholder.com/400x300?text=入职资料预览'
  }
])

// 已拒绝文档列表
const rejectedDocuments = ref([
  {
    id: 6,
    title: '诊所装修方案',
    submitter: '运营部-王经理',
    submitTime: '2025-03-08 15:40',
    rejectTime: '2025-03-09 14:20',
    type: '装修方案',
    status: 'rejected',
    rejectReason: '预算超出计划，请重新评估成本并调整方案。',
    content: '诊所前台及候诊区装修改造方案，包含设计图纸及预算明细。',
    previewUrl: 'https://via.placeholder.com/400x300?text=装修方案预览'
  }
])

// 抽屉控制
const drawerVisible = ref(false)
const currentDocument = ref(null)

// 拒绝模态框控制
const rejectModalVisible = ref(false)
const rejectForm = reactive({
  reason: ''
})

// 打开文档详情
const openDocumentDetail = (doc) => {
  currentDocument.value = doc
  drawerVisible.value = true
}

// 获取状态颜色
const getStatusColor = (status) => {
  switch (status) {
    case 'pending': return 'blue'
    case 'approved': return 'green'
    case 'rejected': return 'red'
    default: return 'default'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'pending': return '待审核'
    case 'approved': return '已通过'
    case 'rejected': return '已拒绝'
    default: return '未知状态'
  }
}

// 显示拒绝模态框
const showRejectModal = () => {
  rejectForm.reason = ''
  rejectModalVisible.value = true
}

// 通过文档
const approveDocument = () => {
  if (!currentDocument.value) return
  
  message.loading({ content: '处理中...', key: 'approve' })
  
  // 模拟API请求
  setTimeout(() => {
    const doc = {...currentDocument.value}
    doc.status = 'approved'
    doc.approveTime = new Date().toLocaleString()
    
    // 从待审核列表中移除
    const index = pendingDocuments.value.findIndex(item => item.id === doc.id)
    if (index !== -1) {
      pendingDocuments.value.splice(index, 1)
    }
    
    // 添加到已通过列表
    approvedDocuments.value.unshift(doc)
    
    message.success({ content: '已通过审核', key: 'approve' })
    drawerVisible.value = false
  }, 1000)
}

// 拒绝文档
const rejectDocument = () => {
  if (!currentDocument.value || !rejectForm.reason) {
    message.error('请输入拒绝原因')
    return
  }
  
  message.loading({ content: '处理中...', key: 'reject' })
  
  // 模拟API请求
  setTimeout(() => {
    const doc = {...currentDocument.value}
    doc.status = 'rejected'
    doc.rejectTime = new Date().toLocaleString()
    doc.rejectReason = rejectForm.reason
    
    // 从待审核列表中移除
    const index = pendingDocuments.value.findIndex(item => item.id === doc.id)
    if (index !== -1) {
      pendingDocuments.value.splice(index, 1)
    }
    
    // 添加到已拒绝列表
    rejectedDocuments.value.unshift(doc)
    
    message.success({ content: '已拒绝该文档', key: 'reject' })
    rejectModalVisible.value = false
    drawerVisible.value = false
  }, 1000)
}
</script>

<style scoped>
.document-review-container {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.page-header p {
  color: #8c8c8c;
}

.review-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.document-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.document-card {
  height: 100%;
}

.document-cover {
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f5ff;
  position: relative;
}

.document-cover.approved {
  background-color: #f6ffed;
}

.document-cover.rejected {
  background-color: #fff1f0;
}

.document-icon {
  font-size: 48px;
  color: #1890ff;
}

.document-cover.approved .document-icon {
  color: #52c41a;
}

.document-cover.rejected .document-icon {
  color: #ff4d4f;
}

.status-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 24px;
}

.document-cover.approved .status-icon {
  color: #52c41a;
}

.document-cover.rejected .status-icon {
  color: #ff4d4f;
}

.document-meta {
  margin-top: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  color: #8c8c8c;
}

.meta-item .anticon {
  margin-right: 8px;
}

.document-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 详情抽屉样式 */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.detail-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.detail-info {
  margin-bottom: 24px;
}

.info-item {
  margin-bottom: 8px;
  display: flex;
}

.info-item .label {
  width: 80px;
  color: #8c8c8c;
}

.info-item .value {
  flex: 1;
}

.document-content h4 {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
}

.content-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preview-image {
  text-align: center;
}

.preview-image img {
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}

.preview-text {
  background-color: #fafafa;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}
</style>
